<template>
    <div>
      <div>
          <div class="nameGoCodeHeader">
            <a @click="backClick"><i class="el-icon-arrow-left"></i></a>
            <span>地址薄</span>
            <a></a>
        </div>
          <div class="find">
            <div class="addressfind" :class="{addressChange:bol}">
              <i class="el-icon-search"></i>
              <input type="text" placeholder="搜索姓名、电话、地址、标签" @focus="bol=true" @blur="bol=false">
              <i class="el-icon-error" :class="{addressDelete:bol}"></i>
            </div>
            <div class="addressCancal" :class="{addressDelete:bol}">取消</div>
            <!-- <div class="addressCancal">取消</div> --> 
          </div>
          <div class="title" :class="{addressDelete1:bol}">
            <div class="title-zi">按标签搜索</div>
            <div class="title-button">
              <button>家</button>
              <button>公司</button>
              <button>学校</button>
              <button>亲人</button>
              <button>朋友</button>
              <button>客户</button>
            </div>
          </div>
          <!-- <button class="placeButton">地址名片</button> -->

          <div v-if="address.length == 0" class="tip">还没有收获地址哦，快去添加一个吧～</div>
          <div v-else class="address" v-for="(item, index) in address" :key="index">
            <div class="address-name">
              <div class="name1">
                <img src="../../../assets/img/address1.png" alt="">
                <span>{{item.name}}</span>
                <p>{{item.phone}}</p>
              </div>
            </div>
            <div class="address-place">
              <div class="place2">
                <div class="jiantou"></div>
                <div class="places">{{item.address}}</div>
              </div>
              <div class="iconbtn">
                  <i class="el-icon-edit-outline" @click="updateAdd(item.add_id)"></i>
                  <i class="el-icon-delete"  @click="loginOut"></i>
              </div>
              <!-- @click="delAddress(item.add_id)" -->
              <div class="alertForLogout" v-if="isShow">
<!--            灰色背景-->
                  <div class="background"></div>
                  <div class="alertBox">
                      <div class="alertBox-title">是否删除地址</div>
                      <div class="alertBox-ask" >将同时删除该地址的地址名片</div>
                      <div class="alertBox-choices">
                          <div class="no" @click="cancel">取消</div>
                          <div class="yse" @click="delAddress(item.add_id)">确定</div>
                      </div>
                  </div>
              </div>
            </div>
            
          </div>
          
        </div>
        

        <!-- <div class="deleteDox">
          <div class="deleteAdd">
              <p class="deleteTi">是否删除该地址</p>
              <p class="deleteAg"></p>
              <button class="buttonOne">取消</button>
              <button class="buttonTwo">确定</button>
          </div>
        </div> -->
        <div class="newButton">
          <button @click="newClick">新建地址</button>
        </div>      
    </div>
</template>

<script>
import UserTop from "@/components/userMine/usertop.vue"
export default {
  data () {
    return {
      msg: '地址薄',
      bol: false,
      address: [],
      isShow:false
    };
  },
  components: {
    UserTop
  },
  methods: {
    backClick(){
      this.$router.push("/userMine")
    },
    cancel(){
      this.isShow=false;
    },
    loginOut(){
      this.isShow=true
    },
    newClick(){
      this.$router.push("/find")
    },
    delAddress(id) {
      this.$http.delete('/api/del_add/' + id)
      .then((data) => {
        if (data.status == 200) {
          this.$message({
            message: '删除成功！',
            type: 'success'
          })
          location.reload();
        }
      })
    },
    updateAdd(id) {
        this.$router.push('/find/' + id);
    }
  },
  created() {
    let id = window.sessionStorage.getItem('phonenum');
    this.$http.get('/api/address/' + id)
    .then(({data}) => {
      this.address = data.data;
    })
  }
}
</script>

<style lang="scss" scoped>
.tip {
    font-size: 24px;
    padding: 20px;
    display: flex;
    justify-content: center;
}
.nameGoCodeHeader{
    height: 70px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f1e9e9;
    padding: 10px 20px 10px 0;
    .el-icon-arrow-left{
        font-size: 40px;
        margin-left: 10px;
    }

    span{
        font-size: 32px;
    }

}
.find{
  padding: 15px 20px;
  background-color: #e6eaea;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .addressfind{
    width: 750px;
    padding: 8px 10px 8px 20px;
    background-color: #fff;
    border-radius: 7px;

    input{
      border: none;
      height: 30px;
      width: 530px;
      padding: 0 10px;
      outline:medium;
      font-size: 20px;
    }
  }
  .el-icon-error{
    color:#bdbdc5;
    display: none;
  }
  .addressChange{
    width: 620px;
  }
  .addressCancal{
    display: none;
    color: #2a2ade;
  }
  .addressDelete{
    display: inline-block;
  }
}

.title{
  height: 260px;
  width: 100%;
  background-color: #fff;
  position: absolute;
  display: none;

  &-zi{
    color: #7e7b82;
    padding: 10px 10px 20px 20px;
  }

  &-button{
    text-align: center;
    
    button{
      height: 60px;
      width: 220px;
      border-radius: 30px;
      border: none;
      margin: 10px 10px;
    }
  }
  
}
.addressDelete1{
    display: inline-block;
}

.address{
  background-color: #fff;
  padding: 10px 50px 10px 20px;
  margin: 15px 0;

  &-name{
    display: flex;
    background-color: #fff;
    justify-content: space-between;
    align-items: center;

    .name1{
      display: flex;
      align-items: center;

      img{
        height: 50px;
      }
      span{
        font-size: 29px;
        font-weight: 500;
        padding: 10px 20px;
      }

      p{
        color: #7e7b82;
      }

    }

  }

  &-place{
    display: flex;
    justify-content: space-between;
    align-items: center;

    .place2{
      display: flex;
      align-items: center;

      .jiantou{
        border-bottom: 1px solid cornflowerblue;
        border-left: 1px solid cornflowerblue;
        height: 20px;
        width: 20px;
        margin: 20px;
      }
      .places{
        padding: 10px 15px;
        color: #675d5d;
      }
    }
    i{
      font-size: 30px;
      margin-left: 20px;
    }
    .iconbtn{
      position: absolute;
      right: 40px;
    }
  }
}
.newButton{
  position: fixed;
  bottom: 0;
  text-align: center;
  background-color: #fff;
  width: 100%;
  z-index: -1;

  button{
    margin: 30px 0 40px 0;
    width: 500px;
    height: 80px;
    color: #fff;
    background-color: cornflowerblue;
    border: none;
    border-radius: 50px;
    font-size: 24px;
    outline: none;
  }
}

.alertForLogout{
            .background{
                position:absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                background-color: #4f4f4f;
                opacity: 0.3;
            }    
                .alertBox{
                    transition: all 1s;
                    width: 80%;
                    background-color: white;
                    position: fixed;
                    top:50%;
                    left:50%;
                    transform:translateX(-50%) translateY(-50%);
                    text-align: center;
                    border-radius: 30px;
                    &-title{
                        font-size: 28px;
                        margin: 10px;
                    }
                    &-ask{
                        font-size: 24px;
                        margin: 30px;
                    }
                    &-choices{
                        display: flex;
                        justify-content: space-around;
                        align-items: center;
                        margin: 30px;
                        .no{
                            font-size: 24px;
                            color: #0072ff;
                            background-color: #a4daef;
                            padding: 10px 70px;
                            border-radius: 30px;
                        }
                        .yse{
                            font-size: 24px;
                            color: white;
                            background-color: #0072ff;
                            padding: 10px 70px;
                            border-radius: 30px;
                        }
                    }
                }
            
        }
</style>